<template>
  <div class="dll_body">
    <div class="dll_setting">
      <van-icon name="arrow-left" style="margin-top: 5px; margin-left:10px ;" @click="onClickLeft" />
      <span style="margin-left: 130px;"> 账号与安全</span>
    </div>
    <div>
      <div class="dll_set">
        <van-cell title="手机号码" size="large" is-link to="dll_zhanghao" style="padding-left: 25px;" />
      </div>
      <div class="dll_xiaoxi">
        <p>第三方账号</p>
        <van-cell center title="微信" style="padding-left: 25px;">
          <template #right-icon>
            <van-switch v-model="checked" />
          </template>
        </van-cell>

      </div>
      <div class="dll_bottom">
        <p>高级设置</p>
        <van-cell title="注销账号" size="large" value="注销不可逆，请谨慎操作" is-link=""
          style="padding-left: 25px;font-size: 12px;" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showConfirmDialog } from "vant";
const checked = ref(false);
const router = useRouter();
const onClickLeft = () => {
  router.go(-1);
};
</script>

<style lang="scss" scoped>
.tuichu {
  width: 90%;
  background-color: #e23940;
  color: white;
  font-size: 16px;
  margin-left: 5%;
  margin-top: 30px
}

.dll_body {
  width: 100%;
  height: 100vh;
  background-color: #F7F7F7;
}

.dll_setting {
  width: 100%;
  display: flex;
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 10px;

  background-color: white
}

.dll_set {
  margin-top: 10px;
}

.dll_xiaoxi {
  margin-top: 10px;

  p {
    font-size: 10px;
    margin-left: 25px;
    color: grey;
    ;
  }
}

.dll_bottom {
  margin-top: 10px;

  p {
    font-size: 10px;
    margin-left: 25px;
    color: grey;
    ;
  }
}
</style>
